<template>
    <div class="editor-upload">
        <editor-title
            :title="title"
            :tips="tips"
            :required="false"
        />

        <el-upload
            v-model:file-list="fileList"
            class="uploader"
            drag
            :multiple="false"
            :disabled="disabled"
            :show-file-list="false"
            :on-success="handleSuccess"
            :http-request="httpRequest"
            :before-upload="beforeUpload"
            :accept="getAccept"
        >
            <div v-if="!imageUrl">
                <icon name="el-icon-UploadFilled" :size="38" />
                <div class="text-sm text-[#798696]">
                    拖拽文件到此处或者<em>点击上传</em>
                </div>
                <div class="text-xs text-[#798696] mt-0.5">
                    支持图片格式：JPG/JPEG/PNG，不超过5M
                </div>
            </div>

            <hover-close
                v-else
                class="w-full"
                custom-class="!top-2 !right-2"
                @close="handleDelete"
            >
                <el-image
                    class="!block h-[150px] max-w-full"
                    :src="imageUrl"
                    fit="contain"
                />
            </hover-close>
        </el-upload>
    </div>
</template>

<script setup lang="ts">
import type { UploadRequestOptions, UploadUserFile } from 'element-plus'
import { useVModels } from '@vueuse/core'
import appApi from '~/api/public/index'
import editorTitle from './editor-title.vue'

const props = withDefaults(
    defineProps<{
        modelValue: string | undefined;
        disabled?: boolean;
        type?: 'image' | 'video' | 'audio';
        files?: UploadUserFile[];
        title?: string;
        tips?: string;
    }>(),
    {
        disabled: false,
        type: 'image',
        title: '上传参考图',
        tips: '上传一张图片做为基底参考'
    }
)

const emits = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()

const { modelValue: imageUrl } = useVModels(props, emits)

const fileList = ref<UploadUserFile[]>([])

const getAccept = computed(() => {
    switch (props.type) {
        case 'image':
            return '.jpg,.png,.jpeg'
        default:
            return '*'
    }
})

/**
 * 上传之前
 *
 * @param file 上传的文件
 */
const beforeUpload = (file: File) => {
    // 大小限制：5MB
    const maxSize = 5 * 1024 * 1024 // 5MB
    if (file.size > maxSize) {
        const sizeStr = parseInt(String(file.size / 1024)) + ' KB'
        feedback.msgError('图片大小不能超过5MB: ≈ ' + sizeStr)
        return false
    }
    return true
}

/**
 * 上传成功
 *
 * @param response
 */
const handleSuccess = (response: any) => {
    imageUrl.value = response.url
}

/**
 * 上传删除
 */
const handleDelete = () => {
    fileList.value = []
    imageUrl.value = ''
}

/**
 * 上传请求
 *
 * @param options
 */
const httpRequest = (options: UploadRequestOptions) => {
    return appApi.upload({
        file: options.file,
        name: 'file',
        data: {
            scene: 'image',
            folder: 'applies/video'
        }
    })
}
</script>

<style lang="scss" scoped>
:deep(.el-upload) {
    .el-upload-dragger {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 150px;
        padding: 0;
        background-color: var(--el-bg-color-page);
    }
}
</style>
